<!--
  Generated template for the ChatDetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>
      <button class="back" (click)="dismiss()">
          <ion-icon name="ios-arrow-back"></ion-icon>
      </button>
      <p text-center>{{groupName}}</p>
      <button class="more" (click)="getGroupUser()">
        <ion-icon name="ios-more"></ion-icon>
      </button>
    </ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
    <div class="message-wrap" [style.marginBottom]="isOpenEmojiPicker?'200px':'0'">
      <div class="message"
       *ngFor="let item of rel"
       [class.right] = "item.username === username"
       [class.left] = "item.username !== username"
       >
          <img src="{{item.imageURL}}" class="user-img"/>
          <ion-spinner name="dots" *ngIf="item.status === 'pending'"></ion-spinner>
          <div class="msg-detail">
            <div class="msg-info">
              <p><span style="color: #387ef5;">{{item.username}}</span>&nbsp;{{item.date}}</p>
            </div>
            <div class="msg-content">
              <p class="line-breaker">{{item.message}}</p>
            </div>
          </div>
      </div>
    </div>
</ion-content>

<ion-footer no-border [style.height]="isOpenEmojiPicker?'255px':'55px'">
  <div class="input-wrap clearfix">
    <!-- <div class="puff_left" style="width: 12%">
      <button ion-button clear ion-only item-right >
        <ion-icon name="ios-add-circle-outline"></ion-icon>
      </button>
    </div> -->
    <div class="puff_left" style="width: 73%">
      <ion-input
      #chatInput
      [(ngModel)]="editorMessage"
      (keyup.enter)="sendMessage()"
      (focus)="focus()"
      placeholder="输入聊天内容"></ion-input>
    </div>
    <div class="puff_left" style="width: 12%">
      <button ion-button clear ion-only item-right (click)="switchEmojiPicker()">
        <ion-icon name="md-happy"></ion-icon>
      </button>
    </div>
    <div class="puff_left" style="width: 15%">
      <button ion-button clear ion-only item-right class="send" (click)="sendMessage()">
        发送
      </button>
    </div>
  </div>
  <emojipicker *ngIf="isOpenEmojiPicker" [(ngModel)]="editorMessage"></emojipicker>
</ion-footer>
